<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<!--vue的路由    vue的页面是多个组件组成,一个vue项目只需要一个html页面 ,通过切换vue的路由来且华安不同的组件-->
<div id="app">

    <h3> 这是主页的页头</h3>
    <hr>
    <!--    定义的路由访问不同的组件的连接  通过to="/路由地址"来指定当前标签要访问的组件-->
    <router-link to="/first">访问系统首页</router-link>
    <router-link to="/second">访问用户页</router-link>

    <!--    指定路由对应组件出现的位置-->
    <router-view></router-view>

</div>
<script>
    let first = {
        template: `
        <div>
        百知教育管理系统
</div>
        `,
    }
    let second = {
        template: `
        <div>学生管理</div>
`
    }
    //为每个组件准备对应的路由   定义每个组件与路由的映射关系
    // 页面的输入路由显示对应的组件
    // 需要将定义好的路由注入到当前的vue实例中
    let myRouter = new VueRouter({
        routes: [
            //path 指的是访问的组件的地址  component 代表这个地址的对应的组件  需要一一对应
            {path: "/first", component: first},
            {path: "/second", component: second},
        ]
    })
    new Vue({
        el: "#app",
        data: {},
        //需要注入定义好的vue路由
        //通过router配置参数注入,从而整个vue实例都拥有路由功能
        router: myRouter
    })
</script>
</body>
</html>